body {
  margin: 0;
  padding: 0;
  user-select: none;
}
div#window {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  display: flex;
}
div#window {
  background-color: var(--color-1);
}
div#window div#NavigationSideBar {
  background-color: var(--color-2);
  width: 63px;
  height: 100vh;
  transition: width 0.5s;
  padding-right: 4px;
}
div#window div#NavigationSideBar[open] {
  width: 16vw;
}
div#window div#NavigationSideBar[open] button.NavigationBtn.mark {
  width: 95%;
}
div#window div#NavigationSideBar button.NavigationBtn {
  position: relative;
  width: 50px;
  height: 50px;
  top: 0.5vw;
  left: 0.4vw;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  overflow: hidden;
}
div#window div#NavigationSideBar button.NavigationBtn:hover {
  background-color: var(--color-3);
}
div#window div#NavigationSideBar button.NavigationBtn:active {
  opacity: 0.8;
}
div#window div#NavigationSideBar button.NavigationBtn#back,
div#window div#NavigationSideBar button.NavigationBtn#menu {
  width: 50px;
}
div#window div#NavigationSideBar button.NavigationBtn#Author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  left: 3.5px;
}
div#window div#NavigationSideBar button.NavigationBtn:disabled svg.icon {
  fill: var(--color-4);
}
div#window div#NavigationSideBar button.NavigationBtn.mark {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
div#window div#NavigationSideBar button.NavigationBtn.mark svg.icon {
  position: relative;
  left: 3px;
  fill: var(--color-5);
}
div#window div#NavigationSideBar button.NavigationBtn.mark img.villager {
  box-shadow: none;
  scale: 1.5;
  position: relative;
  left: 11.5px;
  margin-right: 17px;
}
div#window div#NavigationSideBar button.NavigationBtn.mark[this] svg.icon {
  fill: var(--color-6);
}
div#window div#NavigationSideBar button.NavigationBtn.mark[this] img.villager {
  box-shadow: 0 0 50px 10px var(--color-6);
}
div#window div#NavigationSideBar button.NavigationBtn.mark span.BtnText {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  position: relative;
  left: 20px;
  font: 16px 'Microsoft YaHei';
  color: var(--color-5);
}
div#window div#NavigationSideBar button.NavigationBtn svg.icon {
  fill: var(--color-5);
}
div#window div#NavigationSideBar hr.line {
  position: relative;
  top: 0.5vw;
  border-color: var(--color-7);
}
div#window div#NavigationSideBar div#scrollArea {
  overflow: auto;
  height: 53.5vh;
}
div#window div#NavigationSideBar div#scrollArea::-webkit-scrollbar {
  display: none;
}
div#Frame {
  width: 100%;
  height: 100%;
  /* Public */
}
div#Frame div#Home {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  color: var(--color-5);
}
div#Frame div#Home h1 {
  width: max-content;
}
div#Frame div#Home h1#clock {
  position: relative;
  left: 8.8%;
}
div#Frame div#Home div#askforID {
  margin-top: 50px;
  transform: translateX(-7%);
}
div#Frame div#Home div#askforID input#MinecraftID {
  background-color: transparent;
  border: none;
  position: relative;
  left: 10px;
  color: var(--color-5);
  height: 25px;
  align-self: center;
  border-bottom: 2px solid invert(var(--color-8));
}
div#Frame div#Home div#askforID input#MinecraftID::placeholder {
  font-size: 1.17em;
}
div#Frame div#Home div#askforID input#MinecraftID:focus {
  outline: none;
}
div#Frame div#Home div#askforID button#MinecraftID {
  position: relative;
  left: 20px;
  height: 40px;
  border: none;
  border-radius: 4px;
  background-color: var(--color-6);
  align-self: center;
}
div#Frame div#Home div#askforID button#MinecraftID:hover {
  opacity: 0.9;
}
div#Frame div#Home div#askforID button#MinecraftID:active {
  opacity: 0.85;
}
div#Frame div#Counter {
  padding: 30px 50px;
}
div#Frame div#Counter div.cTop {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
div#Frame div#Counter div.cTop div.pageRight {
  margin-left: auto;
}
div#Frame div#Counter div.cTop div.pageRight button.refetch {
  margin-right: 15px;
}
div#Frame div#Counter div.countUnit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 97.7%;
  height: 50px;
  background-color: var(--color-9);
  padding: 10px 20px;
  border-radius: 6px;
}
div#Frame div#Counter div.countUnit h3.cuTitle {
  color: var(--color-5);
  font-size: 24px;
  font-weight: normal;
}
div#Frame div#Counter div.countUnit span.cuLastUpdate {
  color: var(--color-5);
  font-size: 12px;
  transform: translateY(4px);
}
div#Frame div#Counter div.countUnit div.cuRight {
  margin-left: auto;
}
div#Frame div#Counter div.countUnit div.cuRight button.cuAddBtn {
  transform: translateY(2px);
  padding: 5px 8px 5px 4px;
}
div#Frame div#Counter div.countUnit div.cuRight button.cuAddBtn div.container svg.icon {
  margin-right: 6px;
}
div#Frame div#Counter div.countUnit div.cuRight button.cuMinusBtn {
  transform: translateY(-2px);
}
div#Frame div#Counter div.countUnit div.cuRight button.cuResetBtn {
  transform: translateY(-2px);
  background-color: var(--color-6);
}
div#Frame div#Counter div.countUnit div.cuRight button.cuResetBtn div.container {
  color: var(--color-8);
}
div#Frame div#Counter div.countUnit div.cuRight button.cuResetBtn div.container svg.icon {
  fill: var(--color-8);
}
div#Frame div#Counter div.countUnit div.cuRight button:hover {
  opacity: 0.9;
}
div#Frame div#Counter div.countUnit div.cuRight button:active {
  opacity: 0.8;
}
div#Frame div#Counter div.countUnit div.cuRight span.cuNum {
  color: var(--color-5);
  position: relative;
  bottom: 4px;
  margin-right: 9px;
}
div#Frame div#Waypoint {
  padding: 30px 50px 20px;
}
div#Frame div#Waypoint div.top {
  display: flex;
  align-items: center;
}
div#Frame div#Waypoint div.top div.pageRight {
  margin-left: auto;
}
div#Frame div#Waypoint div.content {
  display: flex;
  justify-content: space-between;
  height: 83.5vh;
  overflow: auto;
}
div#Frame div#Waypoint div.content::-webkit-scrollbar {
  display: none;
}
div#Frame div#Waypoint div.content div.aColomn {
  width: 32%;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: calc(92% - 5px);
  height: 140px;
  background-color: var(--color-9);
  padding: 10px 20px;
  margin-bottom: 10px;
  border-radius: 6px;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard div.wpCardLeft {
  display: block;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard div.wpCardLeft h3.wpTitle {
  color: var(--color-5);
  font: 24px 'Microsoft YaHei Light';
  margin: 0;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard div.wpCardLeft span {
  margin-left: 10px;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard div.wpCardLeft span.wpX {
  color: #fc5454;
  position: relative;
  left: -5px;
  margin-top: 10px;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard div.wpCardLeft span.wpY {
  color: #54fc54;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard div.wpCardLeft span.wpZ {
  color: #5454fc;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard div.wpCardLeft span.wpDim {
  color: #e4b11a;
  position: relative;
  left: -5px;
  top: 5px;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard div.wpCardLeft span.wpAddBy {
  color: var(--color-5);
  font-size: 12px;
  position: relative;
  left: -5px;
  top: -2px;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard button {
  margin-left: auto;
}
div#Frame div#Waypoint div.content div.aColomn div.wpCard button span {
  margin-left: 0;
}
div#Frame div#Villager {
  padding: 20px 40px;
}
div#Frame div#Villager div.top {
  display: flex;
  align-items: center;
}
div#Frame div#Villager div.top button {
  margin-left: auto;
}
div#Frame div#Villager div.line {
  display: flex;
  justify-content: space-between;
  overflow: auto;
  height: 85vh;
}
div#Frame div#Villager div.line::-webkit-scrollbar {
  display: none;
}
div#Frame div#Villager div.line div.aColomn {
  width: 19vw;
}
div#Frame div#Villager div.line div.aColomn div.card {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-5);
  background-color: var(--color-9);
  border: 2px solid var(--color-1);
  border-radius: 6px;
  padding-bottom: 20px;
  margin-bottom: 10px;
}
div#Frame div#Villager div.line div.aColomn div.card img {
  width: 48px;
  height: 48px;
  position: relative;
  top: 10px;
}
div#Frame div#Villager div.line div.aColomn div.card div.content {
  margin-left: 20px;
  text-align: center;
}
div#Frame div#Villager div.line div.aColomn div.card div.content h2.vCardTitle {
  margin-bottom: 5px;
  font-weight: 400;
}
div#Frame div#Villager div.line div.aColomn div.card div.content span.vCardDesc {
  height: 20.8px;
  padding: 1px;
}
div#Frame div#Villager div.line div.aColomn div.card div.content span.vCardDesc i {
  margin: 0;
  font-style: normal;
}
div#Frame div#Villager div.line div.aColomn div.card div.content span.vCardDesc i.g {
  color: #54fc54;
}
div#Frame div#Villager div.line div.aColomn div.card div.content span.vCardDesc i.r {
  color: #fc5454;
}
div#Frame div#Information {
  padding: 30px 50px;
}
div#Frame div#Settings {
  padding: 30px 50px;
}
div#Frame div#Settings div.countSettingUnit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 97.7%;
  height: 50px;
  background-color: var(--color-9);
  padding: 10px 20px;
  border-radius: 6px;
}
div#Frame div#Settings div.countSettingUnit h3.csuTitle {
  color: var(--color-5);
  font-size: 24px;
  font-weight: normal;
}
div#Frame div#Settings div.countSettingUnit span.csuInfo {
  color: var(--color-5);
  font-size: 12px;
  transform: translateY(4px);
}
div#Frame div#Frame {
  margin: 50px;
}
div#Frame div.qfwCard {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  border: 2px solid var(--color-1);
  border-radius: 6px;
}
div#Frame div.qfwCard div.card-header {
  background-color: var(--color-9);
  border-bottom: 2px solid var(--color-1);
  padding: 10px;
  padding-left: 15px;
  cursor: pointer;
  min-height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
div#Frame div.qfwCard div.card-header[no-open] {
  cursor: auto;
}
div#Frame div.qfwCard div.card-header[no-right] {
  justify-content: flex-start;
}
div#Frame div.qfwCard div.card-header svg.icon {
  fill: var(--color-5);
}
div#Frame div.qfwCard div.card-header div.header-right {
  margin-left: auto;
}
div#Frame div.qfwCard div.card-header div.header-right button {
  position: relative;
  top: -1.2px;
}
div#Frame div.qfwCard div.card-header div.header-right span.switch {
  margin-right: 10px;
  padding: 10px;
  border-radius: 4px;
  position: relative;
}
div#Frame div.qfwCard div.card-header div.header-right span.switch#sp {
  top: -6px;
}
div#Frame div.qfwCard div.card-header div.header-right svg.icon.arrow {
  transform: rotate(0deg);
  transition: transform 0.2s;
}
div#Frame div.qfwCard div.card-header div.header-right svg.icon.arrow[open] {
  transform: rotate(180deg);
}
div#Frame div.qfwCard div.card-header:hover div.header-right span.switch {
  background-color: var(--color-10);
}
div#Frame div.qfwCard div.card-header div.context {
  margin-left: 20px;
  color: var(--color-5);
}
div#Frame div.qfwCard div.card-header div.context h3 {
  margin: 0;
  font: 16px "Microsoft YaHei Light";
}
div#Frame div.qfwCard div.card-header div.context span {
  position: relative;
  top: -2px;
  font: 12px "Microsoft YaHei Light";
  opacity: 0.9;
}
div#Frame div.qfwCard div.card-content {
  background-color: var(--color-9);
  padding: 10px;
  display: none;
}
div#Frame div.qfwCard div.card-content label.radio-option {
  color: var(--color-5);
  font: 20px "Microsoft YaHei Light";
  display: block;
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-left: 30px;
  padding-left: 20px;
  padding-bottom: 20px;
}
div#Frame div.qfwCard div.card-content input.radio-btn {
  display: none;
}
div#Frame div.qfwCard div.card-content input#sysdefault + label.radio-option {
  opacity: 0.7;
}
div#Frame div.qfwCard div.card-content input#sysdefault + label.radio-option::before {
  opacity: 0.9;
}
div#Frame div.qfwCard div.card-content input.radio-btn + label.radio-option::before {
  content: "";
  position: relative;
  right: 20px;
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-11);
  border-color: var(--color-11);
  background: transparent;
  border-radius: 50%;
}
div#Frame div.qfwCard div.card-content input.radio-btn:hover + label.radio-option::before {
  background-color: var(--color-12);
}
div#Frame div.qfwCard div.card-content input.radio-btn[checked] + label.radio-option::before {
  background: radial-gradient(circle closest-side at center, var(--color-8) 0%, var(--color-8) 70%, var(--color-6) 30%);
  background-size: 100% 100%;
  border-color: var(--color-6);
}
div#Frame h1.pageTitle {
  font: 36px "Microsoft YaHei";
  font-weight: lighter;
  color: var(--color-5);
}
div#Frame h2.partTitle {
  font: 24px "Microsoft YaHei";
  font-weight: lighter;
  color: var(--color-5);
}
button:not(.NavigationBtn),
button.qfwButton,
button.qfwLinkBtn {
  background-color: var(--color-13);
  border: 1px solid var(--color-15);
  border-bottom: 2px solid var(--color-15);
  height: 37px;
  border-radius: 4px;
  margin: 0 10px;
  margin-left: auto;
  padding: 5px 8px;
  overflow: auto;
  cursor: pointer;
}
button:not(.NavigationBtn) div.container,
button.qfwButton div.container,
button.qfwLinkBtn div.container {
  display: flex;
  align-items: center;
  color: var(--color-5);
}
button:not(.NavigationBtn) div.container svg.icon,
button.qfwButton div.container svg.icon,
button.qfwLinkBtn div.container svg.icon {
  fill: var(--color-5);
  margin-right: 10px;
}
button:not(.NavigationBtn):active,
button.qfwButton:active,
button.qfwLinkBtn:active {
  opacity: 0.8;
}
button.qfwLinkBtn {
  background-color: var(--color-10);
  border: none;
  color: var(--color-6);
}
div.hide {
  display: none !important;
}
